<template>
  <el-form :model="addForm" label-width="100px" :show-message="false" style="display: inline-block" :rules="addFormRules" ref="addForm">
    <el-form-item label="行驶证:" >
      <el-upload
        :action="values.uploadUrl"
        :headers="values.headers"
        accept="image/png, image/jpeg"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :on-progress="uploadProgress"
        :on-success="uploadSuccess"
        :on-error="uploadError"
        :file-list="editFiles"
        :before-upload="beforeAvatarUpload"
        :limit="1"
        :on-exceed="maxNumbers">
        <i class="el-icon-plus"></i>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png格式的图片,且不超过500kb;</div>
      </el-upload>
      <el-dialog
        width="50%"
        :visible.sync="dialogVisibleImage"
        append-to-body>
        <img width="100%"  :src="dialogImageUrl" alt="">
      </el-dialog>
    </el-form-item>
    <el-form-item label="车牌:" prop="name" style="width: 292px;display: inline-block">
      <el-input v-model="addForm.name" clearable maxlength="20" placeholder="请输入VIP等级名称"></el-input>
    </el-form-item>
    <el-form-item label="VIN码:" prop="vin" style="width: 292px;display: inline-block">
      <el-input  clearable  maxlength="20" v-model.number="addForm.vin"/>
    </el-form-item>
    <el-form-item label="姓名:" prop="carName" style="width: 292px;display: inline-block">
      <el-input  clearable maxlength="20" v-model.number="addForm.carName"/>
    </el-form-item>
    <el-form-item label="地址:" prop="address" style="width: 292px;display: inline-block">
      <el-input  clearable maxlength="200" v-model.number="addForm.address"/>
    </el-form-item>
    <el-form-item label="发动机号:" prop="engine" style="width: 292px;display: inline-block">
      <el-input  clearable maxlength="30" v-model.number="addForm.engine"/>
    </el-form-item>
    <el-form-item label="注册时间:" prop="registerTime" style="width: 292px;display: inline-block">
      <el-date-picker v-model="addForm.registerTime" type="date" style="width: 195px" placeholder="注册时间"></el-date-picker>
    </el-form-item>
    <el-row>
      <el-col :span="24" align="center">
        <el-form-item>
          <el-button type="primary" style="background: linear-gradient(90deg, #6B32CC, #E6255B);border: 0;width: 100px" @click="onSubmit">保存</el-button>
          <el-button type="error" style="margin: auto 200px;width: 100px" @click="oncancel">取消</el-button>
        </el-form-item>
      </el-col>
    </el-row>

  </el-form>
</template>

<script>
  import {beforeAvatarUpload} from '@/utils/beforeUpload'
  
  import { getToken } from '@/utils/auth'
  import { parseTimeToYMDHMS } from '@/utils/index'
  import ElRow from "element-ui/packages/row/src/row";
  import Tinymce from '@/components/Tinymce'
  export default {
    components: {ElRow,Tinymce},
    name: 'DialogDataForm',
    props: {
      value: {
        type: Object,
        default: () => ({

        })
      },
      menus: {
        type: Object
      }
    },
    data() {
      var check = (rule, value, callback) => {
        if (value) {
          var regu = "^(http|https):\\/\\/[\\w\\-_]+(\\.[\\w\\-_]+)+([\\w\\-\\.,@?^=%&:/~\\+#]*[\\w\\-\\@?^=%&/~\\+#])?"; // http头检查
          var re = new RegExp(regu);
          if(re.test(value)){
            callback();
          }else{
            callback(new Error('外部地址请以http或https开头'));
          }
        }else{
          callback();
        }
      };
      return {
        dict: {
          coupon: []
        },
        dialogImageUrl:'',
        dialogVisibleImage:false,
        handleDataView: false,
        uploadComplete: true,
        editFiles:[],
        values: {
          uploadUrl: orcUploadUrl,
          headers: { 'token': getToken() }
        },
        addForm: {
          name: '',
          vin: '',
          type: '',
          carName: '',
          address: '',
          engine: '',
          registerTime: ''
        },
        addFormRules: {
          name: [{required: true, trigger: 'blur'}],
          pointStart: [{required: true, trigger: 'blur'}],
          pointEnd: [{required: true, trigger: 'blur'}],
          discount: [{required: true, trigger: 'blur'}],
          pointRate: [{required: true, trigger: 'blur'}],
          sort: [{required: true, trigger: 'blur'}]
        }
      }
    },
    async created() {
      if ( this.$attrs.advert && this.$attrs.advert.logo && this.$attrs.advert.logo != '') {
          var path = { url: this.$attrs.advert.logo}
          this.editFiles.push(path)
          this.addForm = this.$attrs.advert;
      }
    },
    methods: {
      onSubmit() {
        this.$refs.addForm.validate(valid => {
          if (valid) {
            const options = this.addForm
            this.$emit('operate', options)
          } else {
            return false
          }
        })
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisibleImage = true
      },
      handleRemove(file, fileList) {
        this.addForm.logo = [];
        for(let fi of fileList){
          this.addForm.logo.push(fi.url);
        }
      },
      // 上传图片时调用
      uploadProgress() {
        this.uploadComplete = false
      },
      uploadSuccess(res) {
        var data = res.data.ocrResult.frontInfo;
        this.addForm.name = data.plateNo
        this.addForm.vin = data.vin
        this.addForm.type = data.vehicleType
        this.addForm.carName = data.owner
        this.addForm.address = data.address
        this.addForm.engine = data.engineNo
        this.addForm.registerTime = data.registerDate
        this.uploadComplete = true
        this.fileChange(res)
      },
      uploadError() {
        this.$message.error('上传出错')
      },
      fileChange(res) {
        this.addForm.logo = res.data.url;
      },
      maxNumbers(files, fileList){
        if(fileList && fileList.length >= 1){
          this.$message.error('最多可以上传1张照片')
        }
      },beforeAvatarUpload(file){
        return beforeAvatarUpload(file);
      }
    }
  }
</script>
<style lang="scss" scoped>
</style>

